<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 1: Young and Useless</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">


#canvas {
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}

#bg, #char, #starry {display: none;}

.bubble 
{
margin: 450px 0 0 790px;
position: absolute;
width: 250px;
height: 90px;
padding: 10px;
background: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #333;

}

.bubble:after 
{
content: "";
position: absolute;
bottom: -11px;
right: 30px;
border-style: solid;
border-width: 11px 10px 0;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble2
{
margin: 380px 0 0 400px;
position: absolute;
width: auto;
height: auto;
padding: 10px;
background: #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #333;

}

.bubble2:after 
{
content: "";
position: absolute;
top: 7px;
right: -11px;
border-style: solid;
border-width: 6px 0 10px 11px;
border-color: transparent #ccc;
display: block;
width: 0;
z-index: 1;
}

</style>


<script type="text/javascript">
var vc, vctx, vi1, vi2, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d");
		bgr = document.getElementById("bg");
		vctx.drawImage(bgr,0,0,800,600);
		vi1 = document.getElementById("char");
		vi2 = document.getElementById("starry");
		setInterval("animation()",900);		
	
	}
	
	var dax=0; counter=0; starx=0; starcounter=0;
	function animation(){
		if(counter >= 2) counter = 0; else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,600,590,90,160,570,500);
		dax=600*counter;
		
		if(starcounter >= 1) starcounter = 0; else starcounter++;
		vctx.drawImage(vi2,starx,0,1000,750,0,0,800,600);
		starx=1000*starcounter;

	}


</script>


</head>
<body onload="init()">

	<h1>Figment of the Imagination</h1>
	<h2>Chapter 1: Young and Useless</h2>
	<h2>Scene 3: Starry Starry Night</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<div class="bubble">
Ada! Shouldn't you be in bed now? It's past your bedtime! 
Don't you come complaining about headaches tomorrow cause you lacked sleep, otherwise...
</div>

<div class="bubble2">
Ugh. My head hurts again.
</div>

<center><canvas id="canvas" width=800 height=600></canvas></center>
<img id="bg" src="images/ch1/window.jpg" width=800 height=600>
<img id="char" src="images/ch1/staring.png">
<img id="starry" src="images/ch1/starry.png">

<center><img src="images/photo.png" width=800 style="margin:-4px 0 0 0;"></center>

<div id="scenetext">
<p>
The stars covered the darks skies, like tiny white spots on a black canvas. The cold night sun shining 
throughout the entire town. Ada wondered if John was looking at the moon just as she did through her 
windows. She suddenly felt a pang in her head. <br> <br>
"Ada! Shouldn't you be in bed now? It's past your bedtime! Don't you come complaining about headaches 
tomorrow cause you lacked sleep, otherwise..." her mother called. Ada had been enduring her throbbing 
head for days. Dozing for less than 8 hours was the reason, hypothetically.
</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter1Scene2.jsp" title="Night Selfie"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter1Scene4.jsp" title="Zzzz"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

